// 1 导入useState函数
import { useState } from 'react';

// 定义组件
export const App = () => {
  // 定义函数组件的状态
  const [count, setCount] = useState(0);
  // 字符串
  const [name, setName] = useState('Jack');
  // 数组类型
  const [hobbies, setHobbies] = useState(['吃饭', '睡觉', '敲代码']);

  const handleHobbies = () => {
    // setHobbies([...hobbies, Math.random().toString(36).slice(2)]);
    const newArr = [...hobbies, 'gg'];
    console.log(hobbies);
    setHobbies(newArr);
  };

  // 对象类型
  const [obj, setObj] = useState({ name: 'Rose', age: 18 });
  const handleObj = () => {
    const newObj = { ...obj, age: 19 };
    // const newObj = Object.assign({}, obj, { age: 20 });

    setObj(newObj);
  };

  // JSX
  const [jsx, setJsx] = useState(<div>123</div>);

  return (
    <div>
      我是一个组件{count}
      {/* <button onClick={setCount(count + 1)}>count++</button> */}
      <button onClick={() => setCount(count + 1)}>count++</button>
      <h2>{name}</h2>
      <button onClick={() => setName(name + Math.ceil(Math.random() * 10))}>
        修改name
      </button>
      <h2>{hobbies.join('=>')}</h2>
      <button onClick={handleHobbies}>修改爱好</button>
      <h2>
        {obj.name}, {obj.age}
      </h2>
      <button onClick={handleObj}>修改对象</button>
      {jsx}
      <button onClick={() => setJsx(<h3>123</h3>)}>修改JSX</button>
    </div>
  );
};
